<!-- 
	辅助空白组件 
	1、辅助空白背景：背景颜色、背景图片
	2、辅助空白高度设置
-->
<template>
	<div class="component-wrapper">
		<!-- style -->
		<div :style="wrapper_style"></div>
	</div>
</template>

<script>
	export default {
		name: 'u_blank',
		props: {
			componentId: {
				type: String,
				default: ''
			},
			data: {
				type: Object,
				default () {
					return {
						// 辅助空白背景设置
						previewColor: {
							// 辅助空白背景类型 1=背景颜色 2=背景图片
							"isColor": {
								type: String,
								default: '1'
							},
							// 背景颜色 isColor 为 1是取值
							color: {
								type: String,
								default: ''
							},
							// 背景图片 isColor 为 2是取值
							image: {
								type: String,
								default: ''
							}
						},
						// 辅助空白高度
						"searchHeight": {
							type: Number,
							default: 30
						}
					}
				}
			}
		},
		computed: {
			/** 样式 */
			wrapper_style() {
				if (this.data.previewColor) {
					const {
						previewColor,
						searchHeight
					} = this.data;

					return `
			                width: 100%;
			                height: ${searchHeight}px;
			                background-color: ${previewColor.color};
			                background-image: url(${previewColor.isColor == 2 ? previewColor.image : ''});
			                background-size: 100% auto;
			                bakcground-position: center;
			            `;
				}
			},

		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>

</style>
